<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文章编辑 - 我的后台管理</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="__STATIC__/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="__LIB__/dropzone/dropzone.css" />
	<link rel="stylesheet" href="__CSS__/iconfont.css">
	<link rel="stylesheet" href="__CSS__/common.css">
	<link rel="stylesheet" href="__LIB__/editormd/css/editormd.min.css" />
	<style>
		.dropzone{width:160px;padding:0px;border:1px solid #e6e6e6;}
		.dropzone .dz-message{margin:0px;line-height:160px;}
		.layui-input-inline p{padding: 9px 15px;font-weight: 400;line-height: 20px;}
		.del_img{display: block;text-align: center;margin-top: 8px;color: red;cursor: pointer;}
		.del_img:hover{color: red;cursor: pointer;text-decoration: underline;}
		.label-list{display: none;width: 50%;height:500px;position: fixed;left: 0px;top: 0px;right: 0px;bottom: 0px;margin:auto auto;z-index: 999;background: #fff;border:1px solid #ddd;box-shadow: 5px 5px 5px #ccc}
		.label-list .layui-input-block{margin: 15px 30px}
		.label-list .layui-unselect{margin: 10px 10px;}
		.label-list .select-label{position: absolute;bottom: 20px;right: 20px;}
		/*md*/
		#container{z-index: 10}
		#container select{display: inline-block;}
	</style>	
</head>
<body class="childrenBody">
	
	<div class="breadcrum">
		<div class="navgat">
			<h3>
				<a href="javascript:;"><i class="iconfont">&#xe641;</i></a>
				<span>&gt;</span>
				<a href="javascript:;">文章管理</a>
				<span>&gt;</span>
				<a href="javascript:;">编辑</a>
			</h3>
		</div>
		<div class="refresh">
			<div class="layui-btn-group">
				<a onclick="location.reload();" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe669;</i></a>
				<a onclick="history.back();" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe65c;</i></a>
			</div>
		</div>
	</div>
	<div class="main">
		<form class="layui-form newsf" id="form_data">
			<div class="layui-form-item">
				<label class="layui-form-label">标题</label>
				<div class="layui-input-block">
					<input type="text" name="title" class="layui-input linksName" lay-verify="required" value="{$data.title}">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">关键词</label>
				<div class="layui-input-block">
					<input type="text" name="keywords" class="layui-input" lay-verify="required" value="{$data.keywords}">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">文章描述</label>
				<div class="layui-input-block">
					<textarea name="desc" placeholder="请输入文章描述" class="layui-textarea linksDesc">{$data.desc}</textarea>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">文章分类</label>
				<div class="layui-input-inline">
					<select name="class_id" lay-verify="required">
						{volist name="category" id="vo"}
							<option value="{$vo.class_id}" {if $data['class_id'] == $vo.class_id}selected{/if}>{$vo.name}</option>
						{/volist}
					</select>
				</div>		
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">标签</label>
				<div class="layui-input-block">
					<input type="hidden" name="label_id" id="label-val" value="{$labelstr}">
					<a class="layui-btn" id="slt">选择标签..</a>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block labelist" {if empty($labels)}style="display:none"{/if}>
					{volist name="labels" id="vo"}
						<a class="layui-btn layui-btn-primary">{$vo.name}</a>
					{/volist}						
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">导图</label>
				<div class="layui-input-inline">				
					<div id="mydropzone" class="dropzone">
						{neq name="data.image" value=""}
						<div class="dz-preview dz-file-preview">
							<div class="dz-image">
								<img data-dz-thumbnail src="__ROOT__{$data.image}" width="100%" />
							</div>
							<a class="del_img" href="javascript:;" data-url="{$data.image}">删除文件</a>
						</div>
						{/neq}						
					</div>
					<input type="hidden" name="image" value="{$data.image}">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">内容</label>
				<div class="layui-input-block">
					<div id="container">
						<textarea class="editormd-markdown-textarea" name="test-editormd-markdown-doc" style="display: none;">{$data.content}</textarea>
					</div>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">序号</label>
				<div class="layui-input-inline">
					<input type="text" name="ordernum" class="layui-input" lay-verify="number" value="{$data.ordernum}">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">浏览量</label>
				<div class="layui-input-inline">
					<input type="text" name="scan" class="layui-input" lay-verify="number" value="{$data.scan}">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-inline">
					<select name="status" lay-verify="required">
						<option value="1"  {if $data['status'] == 1}selected{/if}>正常发布</option>
						<option value="2"  {if $data['status'] == 2}selected{/if}>存为草稿</option>
						<option value="-1" {if $data['status'] == -1}selected{/if}>暂停使用</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">显示设置</label>
				<div class="layui-input-block">
					<input type="checkbox" name="top"  value="1" title="置顶" {if $data['top'] == 1}checked{/if}>
					<input type="checkbox" name="home" value="1" title="首页" {if $data['home'] == 1}checked{/if}>
				</div>
			</div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<input type="hidden" name="news_id" value="{$data.news_id}">
					<button type="button" class="layui-btn" id="btn_sub" lay-filter="addmenu">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			    </div>
			</div>
		</form>

		<div class="label-list">
			<form class="layui-form" id="form_label">
				<div class="layui-input-block">
					<label class="layui-form-label">标签选择</label>
				</div>
				<div class="layui-input-block lists"></div>
			</form>

			<div class="select-label">
				<a href="javascript:;" class="layui-btn layui-btn-normal"  id="sub-label">确定选择</a>
				<a href="javascript:;" class="layui-btn layui-btn-primary" id="hide-label">关闭</a>
			</div>
		</div>
	</div>

	<script type="text/javascript" src="__STATIC__/layui/layui.js"></script>
	<script type="text/javascript" src="__JS__/jquery.min.js"></script>
	<script type="text/javascript" src="__LIB__/dropzone/dropzone.js"></script>
    <script type="text/javascript" src="__LIB__/editormd/editormd.js"></script>
	<script type="text/javascript">
		// 初始化编辑器
        var testEditor = editormd("container", {
            width   : "100%",
            height  : 640,
            // syncScrolling : false,
            watch   : false,
            codeFold : true,
            path    : "__LIB__/editormd/lib/",
	        theme         : "default",
	        editorTheme   : "eclipse",
	        previewTheme  : "default",
            saveHTMLToTextarea : true,
            // 解析内容
		    htmlDecode      : "style,script,iframe",
		    emoji           : true,
		    taskList        : true,
		    tex             : true,  // 默认不解析
		    flowChart       : true,  // 默认不解析
		    sequenceDiagram : true,  // 默认不解析
			//启动本地图片上传功能
			imageUpload:true,
			imageFormats   : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
			imageUploadURL : "/admin/base/uploadimg",            
        });

		layui.use(['form','layer'],function(){
			var form  = layui.form,
				layer = layui.layer,
				$ = layui.$;


			// 当图片存在时隐藏提示文字
			if ($("div.dz-preview").length > 0) {
				$("div.dz-default.dz-message").hide();
			}

			// 选择标签
			$("#slt").click(function(){
				var val = $("#label-val").val();
				$.ajax({
					type: "POST",
			        url:"/admin/news/label_list",
					data:{'label':val},
					dataType:'json',
			        success: function(data){
			        	var str = '';
			        	for (var i = 0; i < data.length; i++) {
			        		if (data[i].select == 1) {
			        			str += '<input type="checkbox" name="label[]" value="'+data[i].label_id+'" title="'+data[i].name+'" checked>';
			        		}else{
			        			str += '<input type="checkbox" name="label[]" value="'+data[i].label_id+'" title="'+data[i].name+'">';
			        		}
			        	}

			        	$(".label-list .lists").html(str);
						form.render('checkbox');
						$(".label-list").show();
			        }
				})
			})
			// 提交选择
			$("#sub-label").click(function(){
		        // 序列化表单数据
				var form_data = $("#form_label").serialize();
	        	if (!form_data) {
	        		layer.msg("未选择标签");
	        	}
				$.ajax({
					type: "POST",
			        url:"/admin/news/label_select",
					data:form_data,
					dataType:'json',
			        success: function(data){
		        		var str = '';
		        		for (var i = 0; i < data.list.length; i++) {
	        				str += '<a class="layui-btn layui-btn-primary">'+data.list[i].name+'</a>';
		        		}
		        		$("#label-val").val(data.str);
		        		$(".labelist").html(str);
		        		$(".labelist").show();
						$(".label-list").hide();
			        }
				})
			})

			// 隐藏label框
			$("#hide-label").click(function(){
				$(".label-list").hide();
			})

		 	// 提交数据
			$("#btn_sub").click(function(){
		 		var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.2});
				// md编辑器html内容
		        $("#content").val(testEditor.getHTML());
		        //md格式内容，使用md的js获取
		        $("#content").val(testEditor.getMarkdown());
		        // 序列化表单数据
				var form_data = $("#form_data").serialize();
				$.ajax({
					type: "POST",
			        url:"/admin/news/edit?flag=edit",
					data:form_data,
					dataType:'json',
			        success: function(data){
		            	top.layer.close(index);
			        	
			        	if(data.status == -1){
			        		layer.alert(data.msg, {icon: 2});
			        	}else{
			        		layer.msg(data.msg, {icon: 1}, function(){
			        			window.location.href = "/admin/news/index";
			        		});
			        	}
			        }
				})
			})

			
		})

		// upload img
		Dropzone.options.mydropzone = {
			url: "/admin/base/uploadfile?type=news",
			maxFilesize: 2,
			maxFiles: 1,
			paramName:"image",
			acceptedFiles: "image/*",
			addRemoveLinks:true,
			dictRemoveFile:"删除文件",
			dictDefaultMessage:"点击上传",
			dictFallbackMessage:"抱歉，您的浏览器暂不支持图片上传功能",
			init:function(){
				this.on("success",function(file, data){
					if (data.status == -1) {
						layer.alert(data.msg);
					}else{
						$("div.dz-preview.dz-file-preview").remove();
						// 绑定文件路径
						file._removeLink.setAttribute("data-url",data);
						$("input[name='image']").val(data);
						layer.msg("上传成功");
					}
				});
				this.on("error",function(file, errorMessage){
					if (file.status == "error") {
						file.previewElement.remove();
						layer.alert(errorMessage);
					}
				});
				this.on("removedfile",function(file){
					var url = file._removeLink.getAttribute("data-url");
					del_image(url);
				});				
			}
		};

		// 手动删除文件
		$(".del_img").click(function(){
			var url = $(this).attr("data-url");
			layer.confirm('确认删除？', {icon: 3, title:'提示'}, function(index){
				del_image(url);
			});
		})
		
		// 删除图片
		function del_image(url){
			$.ajax({
				type: "POST",
		        url:"{:url('admin/base/del_image')}",
				data:{'url':url},
				dataType:'json',
		        success: function(data){
		        	if(data.status == -1){
		        		layer.alert(data.msg, {icon: 2});
		        	}else{
						$("div.dz-preview.dz-file-preview").remove();
						$("input[name='logo']").val('');
						$("div.dz-default.dz-message").show();
		        		layer.msg(data.msg, {icon: 1});
		        	}
		        }
			})
		}
	</script>
</body>
</html>